﻿<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="ChangePwd.aspx.cs" Inherits="ChangePwd" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
    <style type="text/css">
        .auto-style1 {
            text-align: right;
            width: 100%;
            max-width: 600px;
            margin: auto;
            background-color: #ffffff;
            border-radius: 10px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            padding: 20px;
        }

        .tdright {
            text-align: right;
            padding-right: 10px;
        }

        .tdcenter {
            text-align: center;
            font-weight: bold;
            font-size: 24px;
            padding-bottom: 15px;
            color: #d63384;
        }

        /* 密码强度指示器样式 */
        .weak {
            color: red;
        }

        .medium {
            color: orange;
        }

        .strong {
            color: green;
        }

        /* 密码安全小贴士样式 */
        #password-tips {
            border-radius: 10px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            padding: 20px;
            background-color: #f1f3f4;
            margin-top: 20px;
            color: #333;
            font-size: 14px;
        }

        #password-tips h4 {
            color: #d63384;
            font-size: 18px;
            margin-bottom: 10px;
        }

        #password-tips ul {
            list-style-type: disc;
            padding-left: 20px;
        }

        #password-tips li {
            padding-bottom: 8px;
        }

        /* 密码强度文本样式 */
        #password-strength {
            font-weight: bold;
            font-size: 16px;
            margin-top: 10px;
        }
       /* 反馈按钮 */
   .feedback-section {
        text-align: right;
        margin-top: 20px;
   }
    .feedback-btn {
        background-color: #d63384;
        color: white;
        padding: 10px 20px;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        font-size: 16px;
    }
    .feedback-btn:hover {
        background-color: #c12b6f;
    }
      
   /* 弹窗背景 */
    .modal {
        display: none;
        position: fixed;
        z-index: 1;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        align-items: center;
        justify-content: center;
    }

    /* 弹窗内容 */
    .modal-content {
        background-color: white;
        margin: 15% auto;
        padding: 20px;
        border-radius: 10px;
        width: 400px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        text-align: center;
    }

    /* 标题样式 */
    .modal-content h2 {
        font-size: 24px;
        margin-bottom: 20px;
        color: #333;
        font-weight: bold;
    }

    /* 关闭按钮 */
    .close-btn {
        color: #aaa;
        float: right;
        font-size: 28px;
        font-weight: bold;
        cursor: pointer;
    }

    .close-btn:hover,
    .close-btn:focus {
        color: black;
        text-decoration: none;
    }

    /* 输入框样式 */
    textarea {
        width: 100%;
        height: 100px;
        padding: 5px;
        margin: 15px 0;
        border-radius: 5px;
        border: 1px solid #ccc;
        font-size: 14px;
        box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
        resize: none;
    }

    /* 提交按钮样式 */
    button[type="submit"] {
        background-color: #4CAF50;
        color: white;
        padding: 10px 20px;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        font-size: 16px;
        width: 100%;
        margin-top: 10px;
        transition: background-color 0.3s ease;
    }

    button[type="submit"]:hover {
        background-color: #45a049;
    }

    button[type="submit"]:active {
        background-color: #3e8e41;
    }
   /* 系统安全公告样式美化 */
    #security-updates {
        list-style-type: none;
        padding-left: 0;
        margin: 0;
    }

    #security-updates li {
        margin-bottom: 15px;
        background-color: #fff;
        padding: 15px;
        border-radius: 10px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        font-size: 15px;
        display: flex;
        align-items: center;
        transition: all 0.3s ease;
    }

    #security-updates li:hover {
        transform: translateY(-3px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    #security-updates li::before {
        content: "🔐"; /* 可以更改为适合的图标 */
        margin-right: 10px;
        font-size: 18px;
        color: #ffa500;
    }

    #security-updates li span {
        font-weight: bold;
        color: #333;
        margin-right: 10px;
    }

    #security-updates li p {
        margin: 0;
        color: #666;
    }

    /* 标题样式 */
    #security-title {
        font-size: 20px;
        color: #333;
        font-weight: bold;
        margin-bottom: 20px;
        text-align: left;
        color:red
    }

   /* 美化表格 */
.login-history {
    background-color: #fff;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.login-history h3 {
    font-size: 20px;
    font-weight: bold;
    color: #333;
    margin-bottom: 15px;
}

.login-history table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

.login-history th, .login-history td {
    padding: 12px 15px;
    text-align: left;
    font-size: 16px;
    border-bottom: 1px solid #ddd;
}

.login-history th {
    background-color: #f5f5f5;
    font-weight: bold;
    color: #333;
}

.login-history td {
    background-color: #fff;
    color: #666;
}

.login-history tr:hover {
    background-color: #f9f9f9;
}

.login-history td:first-child {
    font-weight: bold;
    color: #333;
}

    </style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
   <table class="auto-style1">
    <tr>
      <td class="tdcenter" colspan="2">修改密码</td>
    </tr>
    <tr>
      <td class="tdright">原密码:</td>
      <td>
        <asp:TextBox ID="txtOldPwd" runat="server" TextMode="Password"></asp:TextBox></td>
      <td>
        <asp:RequiredFieldValidator ControlToValidate="txtOldPwd" Display="Dynamic" ForeColor="Red" ID="rfvOldPwd" runat="server" ErrorMessage="必填"></asp:RequiredFieldValidator>
      </td>
    </tr>
    <tr>
      <td class="tdright">新密码:</td>
      <td>
        <asp:TextBox ID="txtPwd" runat="server" TextMode="Password" oninput="checkPasswordStrength(this.value)"></asp:TextBox>
      </td>
      <td>
        <asp:RequiredFieldValidator ControlToValidate="txtPwd" Display="Dynamic" ForeColor="Red" ID="rfvPwd" runat="server" ErrorMessage="必填"></asp:RequiredFieldValidator>
      </td>
    </tr>
    <tr>
      <td colspan="2">
        <div id="password-strength" style="font-weight: bold; padding-top: 10px;"></div>
      </td>
    </tr>
    <tr>
      <td class="tdright">确认新密码:</td>
      <td>
        <asp:TextBox ID="txtPwdAgain" runat="server" TextMode="Password"></asp:TextBox></td>
      <td>
        <asp:RequiredFieldValidator ControlToValidate="txtPwdAgain" Display="Dynamic" ForeColor="Red" ID="rfvPwdAgain" runat="server" ErrorMessage="必填"></asp:RequiredFieldValidator>
      </td>
    </tr>
    <tr>
      <td class="tdright" colspan="2">
        <asp:CompareValidator ControlToValidate="txtPwdAgain" ControlToCompare="txtPwd" Display="Dynamic" ForeColor="Red" ID="cvPwd" runat="server" ErrorMessage="2次新密码不一致"></asp:CompareValidator>
      </td>
    </tr>
    <tr>
      <td class="tdright" colspan="2">
        <asp:Button ID="btnChangePwd" runat="server" Text="确认修改" OnClick="btnChangePwd_Click1" />
      </td>
    </tr>
    <tr>
      <td colspan="2">
        <asp:Label ID="lblMsg" runat="server" ForeColor="Red"></asp:Label></td>
    </tr>

  </table>
  
 <!-- 反馈与建议按钮 -->
<div class="feedback-section">
    <button class="feedback-btn" onclick="openFeedbackForm()">反馈与建议</button>
</div>

<!-- 反馈表单的弹窗 -->
<div id="feedbackForm" class="modal">
    <div class="modal-content">
        <span class="close-btn" onclick="closeFeedbackForm()">&times;</span>
        <h2>反馈与建议</h2>
        <form id="feedbackFormContent" onsubmit="submitFeedback(event)">
            <label for="feedback">请留下您的意见或建议:</label>
            <textarea id="feedback" name="feedback" required></textarea>
            <button type="submit">提交反馈</button>
        </form>
    </div>
</div>
    <div class="login-history">
    <h3>近期登录记录</h3>
    <table id="loginRecordsTable">
        <thead>
            <tr>
                <th>登录时间</th>
                <th>IP地址</th>
            </tr>
        </thead>
        <tbody>
            <!-- 登录记录数据将会在此处插入 -->
        </tbody>
    </table>
</div>



    <script>
        function checkPasswordStrength(password) {
            let strength = 0;
            const strengthDisplay = document.getElementById('password-strength');

            // 判断密码长度
            if (password.length >= 8) strength += 1;

            // 判断是否包含大写字母
            if (/[A-Z]/.test(password)) strength += 1;

            // 判断是否包含小写字母
            if (/[a-z]/.test(password)) strength += 1;

            // 判断是否包含数字
            if (/\d/.test(password)) strength += 1;

            // 判断是否包含特殊字符
            if (/[\W]/.test(password)) strength += 1;

            // 根据强度显示相应的提示
            switch (strength) {
                case 0:
                    strengthDisplay.textContent = '';
                    break;
                case 1:
                case 2:
                    strengthDisplay.textContent = '密码强度: 弱';
                    strengthDisplay.className = 'weak';
                    break;
                case 3:
                case 4:
                    strengthDisplay.textContent = '密码强度: 中等';
                    strengthDisplay.className = 'medium';
                    break;
                case 5:
                    strengthDisplay.textContent = '密码强度: 强';
                    strengthDisplay.className = 'strong';
                    break;
            }
        }
</script>
<script>
    // 打开反馈表单弹窗
    function openFeedbackForm() {
        document.getElementById('feedbackForm').style.display = 'flex';
    }

    // 关闭反馈表单弹窗
    function closeFeedbackForm() {
        document.getElementById('feedbackForm').style.display = 'none';
    }

    // 提交反馈
    function submitFeedback(event) {
        event.preventDefault(); // 阻止表单提交的默认行为

        const feedback = document.getElementById('feedback').value;

        if (feedback) {
            // 使用 AJAX 调用后端方法
            $.ajax({
                type: "POST",
                url: "ChangePwd.aspx/SubmitFeedback", // 确保路径正确
                data: JSON.stringify({ feedbackText: $('#feedback').val() }), // 确保 feedbackText 变量传递了正确的值
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (response) {
                    alert(response.d);
                    document.getElementById('feedbackFormContent').reset();
                    closeFeedbackForm();
                },
                error: function (xhr, status, error) {
                    alert("提交失败，请重试！错误信息: " + xhr.responseText);
                }
            });

        } else {
            alert('请填写您的反馈内容。');
        }
    }

  





</script>
    <script>
        // 假数据：最近的登录记录
        const loginRecords = [
            { loginTime: '2024-10-15 08:45', ipAddress: '192.168.1.1' },
            { loginTime: '2024-10-14 12:30', ipAddress: '192.168.1.2' },
            { loginTime: '2024-10-13 18:15', ipAddress: '192.168.1.3' },
            { loginTime: '2024-10-12 09:00', ipAddress: '192.168.1.4' },
            { loginTime: '2024-10-11 14:25', ipAddress: '192.168.1.5' }
        ];

        window.onload = function () {
            const tableBody = document.getElementById('loginRecordsTable').getElementsByTagName('tbody')[0];

            loginRecords.forEach((record, index) => {
                setTimeout(() => {
                    const row = document.createElement('tr');

                    const timeCell = document.createElement('td');
                    timeCell.textContent = record.loginTime;
                    row.appendChild(timeCell);

                    const ipCell = document.createElement('td');
                    ipCell.textContent = record.ipAddress;
                    row.appendChild(ipCell);

                    tableBody.appendChild(row);
                }, index * 200);  // 每200ms显示一行
            });
        };

    </script>

</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder2" Runat="Server">
    <table>
        <tr>
            <td colspan="2">
                <div id="password-tips">
                    <h4>密码安全小贴士</h4>
                    <ul>
                        <li>避免使用生日、手机号等个人信息作为密码。</li>
                        <li>密码应至少包含 8 个字符，建议使用大小写字母、数字和特殊字符。</li>
                        <li>定期更改密码，确保账户安全。</li>
                        <li>不要在不同的网站使用相同的密码。</li>
                        <li>请使用密码管理器来保存复杂的密码。</li>
            </ul>
        </div>
    </td>
  </tr>
          <!-- 系统安全公告 -->
   <div style="background-color: #f0f7ff; padding: 20px; border-radius: 10px; box-shadow: 0 4px 12px rgba(0,0,0,0.1);">
    <h3 id="security-title">系统安全公告</h3>
    <ul id="security-updates">
        <li><span>2024-10-10:</span> 系统升级完成，性能大幅提升。</li>
        <li><span>2024-09-30:</span> 密码策略更新，密码长度要求提升到 8 位以上。</li>
        <li><span>2024-08-15:</span> 增加了新的数据备份功能。</li>
    </ul>
</div>


    </table>
</asp:Content>

